<template>
  <div id="problemInfo">
    <v-header title="问题详情"  :saveShow="false" :showDownloadBtn="false"></v-header>
    <div class="problemInfoContent">
      <div class="header">
        <el-button type="text" icon="el-icon-arrow-left" class="back-btn" @click="comeback()">返回</el-button>
        <p>{{bugListOpt.exp_title}}</p>
      </div>
      <div class="info">
        <div class="info_main">
          <div class="main_right">
            <div class="right_header">
              <p style="font-size: 16px;word-break: break-all;word-wrap: break-word">{{bugListOpt.exp_desc}}</p>
            </div>
            <div class="detailed">
              <div class="detailed_header">
                <div class="item">
                  <strong>{{ bugListOpt.bug_hap_cnt }}</strong>
                  <p>发生次数</p>
                </div>
                <div class="item">
                  <strong>{{ bugListOpt.bug_dev_cnt }}</strong>
                  <p>影响机型数</p>
                </div>
                <div class="item">
                  <strong>{{ bugListOpt.bug_user_cnt }}</strong>
                  <p>影响用户数</p>
                </div>
              </div>
              <div class="detailedInfo">
                <el-tabs v-model="tabs" @tab-click="tabsClick">
                  <el-tab-pane label="设备信息" name="device">
                    <el-row class="deviceinfo" v-for="(item, index) in deviceInfo" :name="index" :key="item.id">
                      <el-row>
                        <el-col :span="12">设备ID: {{item.dev_id}}</el-col>
                        <el-col :span="12">设备信息: {{item.dev_info}}</el-col>
                      </el-row>
                    </el-row>
                  </el-tab-pane>
                  <el-tab-pane label="堆栈信息" name="stack">
                    <div class="stack">
                        <code style="white-space: pre-wrap">{{stack}}</code>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { VHeader } from '../../components'
import canvasLine from './comm/canvasLine/canvasLine'
import { nextPage } from '../../assets/js/index'
import 'echarts/lib/component/tooltip'
import ajax from '../../api/ajax/ajax'
import api from '../../api/url'
import { mixinParams } from '../../assets/js/mixin1'
import { mapGetters } from 'vuex'
export default {
  components: {
    VHeader,
    canvasLine
  },
  mixins: [mixinParams],
  data () {
    return {
      activeNames: 0,
      routeParams: {},
      deviceInfo: [],
      step: [],
      stack: [],
      userdate: [],
      log: [],
      httpreq: [],
      info: [],
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
      pieOption: {
        tppltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}'
        },
        calculable: false,
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            label: {show: true},
            labelLine: {show: true, length: 0},
            data: [
              {
                value: '20', name: '余'
              },
              {
                value: '60', name: '已开'
              }
            ]
          }
        ]
      },
      record: '所有记录',
      recordList: ['所有记录', '留言', '标签状态'],
      labelValue: '',
      fileList: [],
      track: [],
      textarea: '',
      trackList: ['赵静', '张三', '李四', '王五', '赵钱', '孙李'],
      tabs: 'device',
      tabsList: ['设备信息', '重现步骤']
    }
  },
  computed: {
    ...mapGetters([
      'bugListOpt'
    ])
  },
  watch: {
    appFlag: {
      handler (val) {
        if (val) {
          this.addFlag = true
          nextPage('/home/bugIndex')
          this.pd_updatePath('/home/bugIndex')
        }
      }
    }
  },
  methods: {
    submitUpload () {
      this.$refs.upload.submit()
    },
    comeback () {
      if (this.bugListOpt.id === 1) {
        nextPage('/home/problem')
      } else if (this.bugListOpt.id === 0) {
        nextPage('/home/role')
      }
    },
    tabsClick (tab, event) {
      switch (tab.name) {
        case 'stack': {
          let params = {
            exp_title: this.bugListOpt.exp_title,
            exp_desc: this.bugListOpt.exp_desc,
            app_ver: this.bugListOpt.app_ver
          }
          ajax.post(api.QUERY_STACKINFO, params)
            .then(res => {
              this.stack = res.data
            })
        }
      }
    },
    queryDeviceInfo () {
      let params = {
        exp_title: this.bugListOpt.exp_title,
        exp_desc: this.bugListOpt.exp_desc,
        app_ver: this.bugListOpt.app_ver
      }
      ajax.post(api.QUERY_DEVICEINFO, params)
        .then(res => {
          this.deviceInfo = res.data
          console.log('this.deviceInfo', this.deviceInfo)
        })
    }
  },
  mounted () {
    this.queryDeviceInfo()
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  #problemInfo
    height 100%
    .left
      float left
    .right
      float right
    .problemInfoContent
      overflow auto
      height calc(100% - 56px)
      padding 10px 0 0 10px
      padding-bottom 14px
      .header
        height 60px
        border-bottom 1px solid #f8f8f8
        background-color #fff
        padding 10px 15px
        font-size 16px
        line-height 40px
        color #000
        .back-btn
          float left
          font-size 14px
          padding 0
          line-height 40px
          height 40px
        & > p
          float left
          margin-left 25px
          text-align left
        .avatar
          width 50px
          height 50px
          border-radius 50%
          background-color red
      .info
        .info_header
          height 50px
          line-height 50px
          padding 0 15px
          background-color #ffffff
          border-bottom 1px solid #f8f8f8
        .info_header:after, .info_main:after
          content ''
          display table
          clear both
        .info_main
          background-color #fff
          .main_left
            padding 0 10px
            margin-right 30px
            background-color #fff
            .track
              p
                margin-bottom 10px
              padding-top 20px
              padding-left 10px
              width 70px
              .el-checkbox+.el-checkbox
                margin-left 0
                margin-top 20px
              .el-checkbox-group
                margin-left 10px
            .buttons
              width 60px
              margin-top 15px
              button
                width 150px
                margin-left 30px
                margin-bottom 30px
              .el-button+.el-button
                margin-left 30px
          .main_right
            .right_header
              height 30px
              line-height 30px
            margin 0 auto
            padding 10px 15px
            width 100%
            background-color #fff
            .detailed
              .detailed_header
                display flex
                justify-content space-between
                padding 10px 0
                .item
                  flex 1
                  margin 0 5px
                  padding 25px 15px
                  font-size 12px
                  line-height 20px
                  text-align center
                  height auto
                  &:first-child
                    margin-left 0
                  &:last-child
                    margin-right 0
                  & > strong
                    display block
                    font-weight normal
                    font-size 32px
                    line-height 28px
                    margin-bottom 5px
                div
                  width 190px
                  height 75px
                  background-color #f8f8f8
              .detailedInfo
                min-height 400px
                .el-collapse
                  border-top 0 none
                  .el-row
                    margin-bottom 0
                  .el-col
                    height 30px
                    line-height 30px
                .deviceinfo
                  .deviceinfolist
                    li
                      margin-bottom 10px
                      margin-right 120px
                      font-size 10px
                      float left
                      width 310px
                      color #5e5e5e
                .stack
                  padding 15px
                  background #f5f5f5
            .right_footer
              min-height 300px
              margin-top 50px
              .record
                padding 10px 10px
                margin 0 auto
                width 750px
                height 50px
                background-color #f8f8f8
              .message:after
                content ''
                display table
                clear both
              .message
                width 700px
                margin 20px auto
                .messageicon
                  width 50px
                  height 50px
                  border-radius 50%
                  background-color red
                  margin-right 20px
                .textarea:after
                  content ""
                  width 0
                  heigth 0
                  position absolute
                  border-top 10px solid transparent
                  border-left 10px solid transparent
                  border-bottom 10px solid transparent
                  border-right 10px solid #dcdfe6
                  left -19px
                  top 8px
                  z-index 100
                .textarea:before
                  content ''
                  width 0
                  height 0
                  position absolute
                  border-top 9px solid transparent
                  border-left 9px solid transparent
                  border-right 9px solid #fff
                  border-bottom 9px solid transparent
                  left -17px
                  top 9px
                  z-index 101
                .textarea
                  .line
                    position absolute
                    height 101px
                    width 1px
                    background-color #dcdfe6
                    left -46px
                    top -101px
                  width 600px
                  position relative
                  .messagetop, .messagebot
                    height 50px
                    width 100%
                    border 1px solid #dcdfe6
                    padding 15px
                  .messagebot
                    border-top none
                  .uploadfile
                    margin-top 20px
</style>
